<template>
  <div class="quick-actions">
    <Card title="快速操作" :bordered="false">
      <Row :gutter="16">
        <Col :span="6">
          <Card class="action-card" @click="openQuickSchedule">
            <div class="action-content">
              <IconifyIcon icon="mdi:calendar-plus" class="action-icon" />
              <div class="action-text">
                <h4>快速排期</h4>
                <p>快速创建资源排期</p>
              </div>
            </div>
          </Card>
        </Col>
        <Col :span="6">
          <Card class="action-card" @click="checkConflicts">
            <div class="action-content">
              <IconifyIcon
                icon="mdi:alert-circle"
                class="action-icon warning"
              />
              <div class="action-text">
                <h4>冲突检测</h4>
                <p>检查排期冲突</p>
              </div>
            </div>
          </Card>
        </Col>
        <Col :span="6">
          <Card class="action-card" @click="batchSchedule">
            <div class="action-content">
              <IconifyIcon icon="mdi:calendar-multiple" class="action-icon" />
              <div class="action-text">
                <h4>批量排期</h4>
                <p>批量创建排期</p>
              </div>
            </div>
          </Card>
        </Col>
        <Col :span="6">
          <Card class="action-card" @click="generateReport">
            <div class="action-content">
              <IconifyIcon icon="mdi:file-chart" class="action-icon" />
              <div class="action-text">
                <h4>生成报表</h4>
                <p>生成调度报表</p>
              </div>
            </div>
          </Card>
        </Col>
      </Row>

      <div class="quick-stats">
        <Row :gutter="16">
          <Col :span="8">
            <Statistic
              title="今日排期"
              :value="stats.todaySchedules"
              :value-style="{ color: '#1890ff' }"
            />
          </Col>
          <Col :span="8">
            <Statistic
              title="冲突数量"
              :value="stats.conflicts"
              :value-style="{ color: '#ff4d4f' }"
            />
          </Col>
          <Col :span="8">
            <Statistic
              title="资源利用率"
              :value="stats.utilizationRate"
              :precision="1"
              :value-style="{ color: '#52c41a' }"
              suffix="%"
            />
          </Col>
        </Row>
      </div>
    </Card>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive } from 'vue';
import { Card, Col, message, Row, Statistic } from 'ant-design-vue';
import { IconifyIcon } from '@vben/icons';

const stats = reactive({
  todaySchedules: 0,
  conflicts: 0,
  utilizationRate: 0,
});

// 快速排期
const openQuickSchedule = () => {
  message.info('快速排期功能开发中...');
};

// 冲突检测
const checkConflicts = () => {
  message.info('冲突检测功能开发中...');
};

// 批量排期
const batchSchedule = () => {
  message.info('批量排期功能开发中...');
};

// 生成报表
const generateReport = () => {
  message.info('生成报表功能开发中...');
};

// 加载统计数据
const loadStats = async () => {
  try {
    // 模拟API调用
    await new Promise((resolve) => setTimeout(resolve, 500));

    stats.todaySchedules = 15;
    stats.conflicts = 2;
    stats.utilizationRate = 85.6;
  } catch (error) {
    console.warn('加载统计数据失败:', error);
  }
};

onMounted(() => {
  loadStats();
});
</script>

<style scoped>
.quick-actions {
  padding: 20px;
}

.action-card {
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid #f0f0f0;
}

.action-card:hover {
  box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
  transform: translateY(-2px);
}

.action-content {
  display: flex;
  align-items: center;
  padding: 16px;
}

.action-icon {
  font-size: 32px;
  color: #1890ff;
  margin-right: 16px;
}

.action-icon.warning {
  color: #faad14;
}

.action-text h4 {
  margin: 0 0 4px 0;
  color: #262626;
}

.action-text p {
  margin: 0;
  color: #8c8c8c;
  font-size: 12px;
}

.quick-stats {
  margin-top: 24px;
  padding: 20px;
  background: #fafafa;
  border-radius: 8px;
}
</style>
